<template>
  <div style="background-color: #fff;min-height:100vh">
    <homeHead  :showLeft="true" :name="'推荐'"></homeHead>  
    <listArticle></listArticle>
  </div>
</template>
<script>
import homeHead from "./head.vue"; 
import listArticle from "./listArticle.vue";
export default {
  name: "list",
  mounted() {
  },
  methods: {
    goTO(className){
      this.$router.push('/'+className)
      this.changeClass(className)
    },
  },
  components: {
     homeHead: homeHead,
     listArticle:listArticle,
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/css/zyy_phone.css";
@import "../../assets/css/search.css";
.list-header {
  background:#fff;
  overflow-x:hidden;  
    ul{
      width: 100%;

      li {
        width:100%;
        height:45px;
        line-height:45px;
        padding:0 10px;
        .img {
          display: inline-block;
          width:32px;
          height:32px;
          img {
            width:100%;
            height:100%;
          }
        }
        .content {
          display: inline-block;
          height:100%;
          vertical-align: top;
          width:calc(100% - 60px);
          border-bottom:1px solid #ddd;
          position: relative;

          .font {
            width:calc(100% - 50px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
          }
          .i {
            position: absolute;
            right:0;
            color:#989898;
            font-size:20px;
          }
        }
      }

      li:nth-child(2) {
        img {
          width:25px;
          height:25px;
        }
      }
    }
}
</style>